<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <script src="../../vue.js"></script>
      <title>Document</title>
</head>
<body>

      <select name="" id="">

            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">杭州</option>
      </select>


      <div id="app">


            <p>{{message}}</p>

      </div>

      <div id="index">


                  <p>{{message}}</p>

                  <custom-child></custom-child>
      
            </div>

      <script>


            Vue.component('custom-child',{

                  data(){

                        return{

                            message:'12234567'
                        }
                  },

                  components: {
                        
                  },

                  template:`<div>{{message}}</div>`
            });

          let child=  Vue.extend({

                  data(){

                        return{

                              message:'child'
                        }
                  }
            });

            (new child()).$mount('#index')



       let vm=   new Vue({

            data:{

                  message:'kello'
            }   
         });


         setTimeout(function(){

                vm.$mount('#app');

         },1000);

        
      
      </script>
      
</body>


</html>